<template>
    <div class="cgs-pag flex-row no-select">
        <span class="cgs-pag-total">共{{total}}条</span>
        <select class="cgs-pag-select"
                v-model="pageSize"
                @change="selectChange"
        >
            <option class="cgs-pag-option" value = 10 >10条/页</option>
            <option class="cgs-pag-option" value = 20 >20条/页</option>
            <option class="cgs-pag-option" value = 50 >50条/页</option>
            <option class="cgs-pag-option" value = 100 >100条/页</option>
        </select>

        <div class="cgs-pag-btn" @click.stop="handleLeft">
            <div class="pag-icon left" style="transform: rotate(180deg)"></div>
        </div>
        <div class="cgs-pag-btn"
             :class="{'pag-btn-check': currentPage === 1}"
             @click.stop="changePage(1)"
             v-if="startEnd.start > 1"
        >
            1
        </div>
        <div class="cgs-pag-btn" v-if="startEnd.start > 2">
            ···
        </div>
        <div class="cgs-pag-btn"
             v-for="page in startEnd.end"
             :key="page"
             v-if="page >= startEnd.start"
             :class="{'pag-btn-check': page === currentPage}"
             @click.stop="changePage(page)"
        >
            {{page}}
        </div>
        <div class="cgs-pag-btn" v-if="startEnd.end < totalPage - 1">
            ···
        </div>
        <div class="cgs-pag-btn"
             :class="{'pag-btn-check': currentPage === totalPage}"
             @click.stop="changePage(totalPage)"
             v-if="startEnd.end < totalPage"
        >
            {{totalPage}}
        </div>
        <div class="cgs-pag-btn" @click.stop="handleRight">
            <div class="pag-icon left"></div>
        </div>
        <span style="margin-right: 10px">跳至</span>
        <div style="margin-right: 10px;">
            <input @keyup.enter="inputKeyDown" class="pag-input"/>
        </div>
        <span>页</span>
    </div>
</template>

<script>
    export default {
        name: "CgsPagination",
        props: {
            'current-page': {
                type: Number,
                default: 1
            },
            'page-size': {
                type: Number,
                default: 10
            },
            total: {
                type: Number
            }
        },
        data() {
            return {
            }
        },
        methods: {
            changePage(index) {
                this.currentPage = index
                this.$emit('page-change', this.currentPage)
            },
            handleLeft () {
                if(this.currentPage > 1) {
                    this.currentPage -= 1
                    this.$emit('page-change', this.currentPage)
                }
            },
            handleRight () {
                if(this.currentPage < this.totalPage) {
                    this.currentPage += 1;
                    this.$emit('page-change', this.currentPage)
                }
            },
            selectChange (event) {
                this.pageSize = event.target.value;
                this.currentPage = 1;
                this.$emit('page-size-change', this.pageSize)
            },
            inputKeyDown (e) {
                try {
                    let value = parseInt(e.target.value)
                    if (1 <= value <= this.totalPage) {
                        this.currentPage = value;
                        this.$emit('page-change', this.currentPage)
                    } else {
                        this.$message.warning('页数无效，请重新输入！')
                    }
                }
                catch (e) {
                    this.$message.warning('页数无效，请重新输入！')
                }
            }
        },
        computed: {
            totalPage() {
                let {total, pageSize} = this;
                return Math.ceil(total / pageSize);
            },
            startEnd(){
                let {currentPage, totalPage} = this;
                let continuePage = 3;
                let start = 0, end = 0

                if (continuePage >= totalPage) {
                    start = 1;
                    end = totalPage;
                } else {
                    start = currentPage - Math.floor(continuePage / 2)
                    end = currentPage + Math.floor(continuePage / 2)

                    if(start <= 0) {
                        start = 1
                        end = continuePage
                    }
                    if (end > totalPage) {
                        start = totalPage - continuePage + 1
                        end = totalPage
                    }

                }
                return {start, end}
            }
        }
    }
</script>

<style scoped lang="less">
@import "../../assets/style/pagination.less";
</style>
